<template>
  <div>
    <v-header></v-header>
	  <!--内容-->
	  <div class="ris_cont">
		<!--新增或修改模态-->
		<div class="ris_dept_modal2" v-show="ris_dept_modal">
			<div class="ris_dept_modal_cont">
			    <p class="ris_dept_modal_head">设备类型设置<span class="ris_dept_modal_btn_close" @click="modal_close">X</span></p>
			    <table class="ris_dept_modal_tab2">
			        <tr>
			            <td>类型名称</td>
			            <td><input type="text" v-model="bename" @blur="getpycode()"></td>
			        </tr>
			        <tr>
			            <td>拼音码</td>
			            <td><input v-model="bepycode"></td>
			        </tr>
			        <tr>
			            <td>排序号</td>
			            <td><input type="number" v-model="besortnum" @blur="getsortnum()"></td>
			        </tr>
            <tr>
              <td>归属系统</td>
              <td><input type="text" v-model="besource"></td>
            </tr>
            <tr>
              <td>归属编号</td>
              <td><input type="text" v-model="besourceCode"></td>
            </tr>
			        <tr>
			            <td>是否使用</td>
			            <td>
			                <select v-model="beisuse">
			                    <option value="1">是</option>
			                    <option value="0">否</option>
			                </select>
			            </td>
			        </tr>
			        <tr>
			            <td>备注</td>
			            <td>
			                <textarea v-model="bememo"></textarea>
			            </td>
			        </tr>
			    </table>
			    <div class="ris_dept_modal_btn2">
			        <button @click="add_update()">确认</button>
			        <button class="ris_dept_modal_btn_close" @click="modal_close">取消</button>
			    </div>
			</div>
		</div>


		<!--点击删除时候的提示模态-->
		<div class="ris_dept_delete" v-show="deleteModal">
			<div>
			    <div class="ris_dept_delete_head">
			        <span class="ris_dept_delete_btn_close" @click="closeDeleteModal">X</span>
			    </div>
			    <p class="ris_dept_delete_text">你确认删除吗？</p>
			    <div class="ris_dept_delete_btn">
			        <button @click="delete_qr()">确认</button>
			        <button class="ris_dept_delete_btn_close" @click="closeDeleteModal">取消</button>
			    </div>
			</div>
		</div>



	    <div class="ris_cont_headHint">设备类型设置<div class="ris_cont_headHint_add" @click="ris_cont_headHint_add()">+</div></div>
	    <div class="ris_cont_dept">
	        <table class="ris_cont_dept_tab">
	            <tr>
                  <th>编号</th>
	                <th>类型名称</th>
	                <th>拼音码</th>
	                <th>归属系统</th>
	                <th>归属编号</th>
	                <th>排序号</th>
	                <th>是否使用</th>
	                <th>备注</th>
	                <th>操作</th>
	            </tr>
	            <tr v-for="(et,index) in eqptypes">
                  <td>{{et.code}}</td>
	                <td>{{et.name}}</td>
	                <td>{{et.pycode}}</td>
	                <td>{{et.source}}</td>
	                <td>{{et.sourcecode}}</td>
	                <td>{{et.sortnum}}</td>
	                <td>{{et.isuse | usefilter}}</td>
                  <td :title="et.memo">{{et.memo | length6}}</td>
	                <td>
	                    <button class="ris_cont_dept_tab_change" @click="update(et.code,et.name,et.pycode,et.isuse,et.sortnum,et.memo,et.source,et.sourcecode,et.id)">修改</button>
	                    <button class="ris_cont_dept_tab_delete bg_yellow" @click="deleteDept(et.code)">删除</button>
	                </td>
	            </tr>
	        </table>
	    </div>
	</div>
  </div>
</template>

<script>
  import Header from '@/components/Header/Header';

		export default {
      components: {
        'v-header': Header
      },
      created(){

        this.$http.get(window.localStorage.url+"/baseEqptype/findallEqptype")
          .then(function (res1) {
            if(res1.data.status=='SUCCESS') {
              this.eqptypes=res1.data.data;
            }
          });



      },
	    name: 'hello',
//	    props:{
//	        root:Object
//	    },
//	    created(){
	        //window.location.href = "http://139.217.17.69:8099/pos/authorize?client_id=b8bcd026b8bc47c88c785d77fe91a601&response_type=code&client_key=a482d714becb475da50b9bd1b7031a87&redirect_uri=http://10.0.2.46:8080/qytj/indexRedirect.html";
//	    },
	    data () {
	      return {
	        url:"",
	        ris_dept_modal:false,//新增修改的模态
	        //删除的模态
	        deleteModal:false,
          //所有数据
          eqptypes:"",

          becode:"",
          bename:"",
          bepycode:"",
          beisuse:1,
          besortnum:0,
          bememo:"",
          besource:"",
          besourceCode:"",
          beid:"",

          add_update1:"",//1 添加 2 修改



        }
	    },
      filters:{
        //过滤器
        usefilter(isuse){
          if(isuse==1){
            return "是";
          }else{
            return "否";
          }
        },
        length6(text){
          text=$.trim(text)+"";
          if(text.length>=7){
            text=text.slice(0,6);
            text=text+"...";
            return text;
          }else{
            return text;
          }
        },

      },
	    mounted(){


	    }
	    ,
	    methods:{
			//init

        //公共弹窗
        addModal:function (text,time) {
          $pg.popup({
            text:text,//显示的文本
            btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
            btnBgColor:'#4f56a3',//按钮的颜色
            btnToggle:{
              btnDetermine:true,//确定按钮是否显示
              btnCancel:false,//取消按钮是否显示
            },
            timeOut:time,
          });
        },

        getpycode(){
//          console.log(this.bename);
          this.$http.get(window.localStorage.url+"/pytool/getPyCode?name="+this.bename)
            .then(function (res) {
              if(res.data.status=='SUCCESS') {
                this.bepycode=res.data.data;
              }
            });
        },

        //sortnum 为空时默认为0
        getsortnum(){

          if(this.besortnum==""){

            this.besortnum=0;

          }
        },



        add_update(){

          if(this.bename==""){

            $pg.popup({
              text:"设备类型名称不能为空！",//显示的文本
              btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
              btnBgColor:'#4f56a3',//按钮的颜色
              determine:function(){

              },//点击确定执行的方法
            });

            return;
          }

//
//          if(this.bsortnum==""){
//
//            $pg.popup({
//              text:"排序号不能为空！",//显示的文本
//              btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
//              btnBgColor:'#4f56a3',//按钮的颜色
//              determine:function(){
//
//              },//点击确定执行的方法
//            });
//
//            return;
//
//          }

          if(this.add_update1==1){//添加
//            console.info(this.bename,this.bepycode,this.beisuse,this.besortnum,this.bememo,this.besource,this.besoueceCode);
            this.$http.get(window.localStorage.url+"/baseEqptype/addEqptype?name="+this.bename+"&pycode="+this.bepycode
              +"&isuse="+this.beisuse+"&sortnum="+this.besortnum+"&memo="+this.bememo+"&source="+this.besource+"&sourceCode="+this.besourceCode)
              .then(function (res) {
                if(res.data.status=='SUCCESS') {

                  this.eqptypes=res.data.data;
                  this.ris_dept_modal=false;

                  this.addModal(res.data.data,1);//公共弹窗

                  this.$http.get(window.localStorage.url+"/baseEqptype/findallEqptype")
                    .then(function (res1) {
                      if(res1.data.status=='SUCCESS') {
                        this.eqptypes=res1.data.data;
                      }
                    });

                }else{

                  //提示框
                  this.addModal(res.data.data,true);//公共弹窗


                }
              });
          }
          if(this.add_update1==2){//修改

            this.$http.get(window.localStorage.url+"/baseEqptype/updatebasedept?name="+this.bename+"&pycode="+this.bepycode
              +"&isuse="+this.beisuse+"&sortnum="+this.besortnum+"&memo="+this.bememo+"&source="+this.besource+"&sourceCode="+this.besourceCode+"&id="+this.beid+"&code="+this.becode)
              .then(function (res) {
                if(res.data.status=='SUCCESS') {
                  //提示框
                  this.addModal(res.data.data,1);//公共弹窗

                  this.ris_dept_modal=false;
                    this.$http.get(window.localStorage.url+"/baseEqptype/findallEqptype")
                      .then(function (res1) {
                        if(res1.data.status=='SUCCESS') {
                          this.eqptypes=res1.data.data;
                        }
                      });
                  }else{

                  this.addModal(res.data.data,true);//公共弹窗


                }
              });




          }
        },





			//init
			ris_cont_headHint_add(num){
        this.bename="";
        this.bepycode="";
        this.beisuse=1;
        this.besortnum="";
        this.bememo="";
        this.besource="";
        this.besourceCode="";
				this.ris_dept_modal=true;
        this.add_update1=1;//添加
//        this.besortnum=
        this.$http.get(window.localStorage.url+"/baseEqptype/findMaxNum")
          .then(function (res) {
              this.besortnum=res.data.data;
//              console.log(this.besortnum)
          });



			},
      update(code,name,pycode,isuse,sortnum,memo,source,sourcecode,id){
//
//        console.log(source+"/-/"+sourcecode);
//			  console.log(this.bsource,this.bsourcecode);
        this.becode="";
        this.bename="";
        this.beisuse=1;
        this.bememo="";
        this.besource="";
        this.besourceCode="";

        this.ris_dept_modal=true;
			  if(code!=undefined){this.becode=code}
			  if(name!=undefined){this.bename=name}
			  if(isuse!=undefined){this.beisuse=isuse}
			  if(sortnum!=undefined){this.besortnum=sortnum}
			  if(memo!=undefined){this.bememo=memo}
			  if(source!=undefined){this.besource=source}
			  if(sourcecode!=undefined){this.besourceCode=sourcecode}
			  if(id!=undefined){this.beid=id}
        this.bepycode=pycode;
        this.add_update1=2;//添加
      },
      //关闭模态
			modal_close(){
				this.ris_dept_modal=false;
			},


        deleteDept(code){
          var _this=this;
//          console.log(code);
          $pg.popup({
            text:"确定删除吗？",//显示的文本
            btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
            btnBgColor:'#4f56a3',//按钮的颜色
            determine:function(){
              _this.$http.get(window.localStorage.url+"/baseEqptype/deletebaseEqptype?code="+code)
                .then(function (res) {
//                  console.log("删除" + res.data.status);
                  if(res.data.status=='SUCCESS') {
                    //提示框
                    _this.addModal(res.data.data,1);//公共弹窗

                    _this.$http.get(window.localStorage.url+"/baseEqptype/findallEqptype")//成功遍历数据
                      .then(function (res1) {
                        if(res1.data.status=='SUCCESS') {
                          _this.eqptypes=res1.data.data;
                        }
                      });

                  }else{
                    _this.addModal(res.data.data,true);//公共弹窗

                  }
                });

            },//点击确定执行的方法
          });


        },





			//删除按钮
			thisDelete(code){
//        this.becode=code

				this.deleteModal=true;
			},
        //删除确认
        delete_qr(){
//          console.log(this.becode);
          this.deleteModal=false;
          this.$http.get(window.localStorage.url+"/baseEqptype/deletebaseEqptype?code="+this.becode)
            .then(function (res) {
//              this.besortnum=res.data.data;
              if(res.data.status=='SUCCESS') {

                this.$http.get(window.localStorage.url+"/baseEqptype/findallEqptype")
                  .then(function (res1) {
                    if(res1.data.status=='SUCCESS') {
                      this.eqptypes=res1.data.data;
                    }
                  });
              }

            });
        },
			//关闭删除的模态
			closeDeleteModal(){
				this.deleteModal=false;
			}


	    },
//	    beforeUpdate() {
//		    this.$nextTick(function(){
//
//		    })
//		},

  }
</script>

<style scoped>

.ris_cont_headHint{
	height: 40px;
	background-color: #999;
	color: #f1f1f1;
	line-height: 40px;
	padding-left: 30px;
	box-sizing: border-box;
}

/*新增按钮*/
.ris_cont_headHint_add{
    width: 70px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    float: right;
    background-color: #666;
    color: #fff;
    cursor: pointer;
}
/*内容区*/
.ris_cont_dept{
    width: 95%;
    margin: 0 auto;
    background-color: #fff;
}
.ris_cont_dept_tab{
    width: 100%;
    line-height: 40px;
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
}
.ris_cont_dept_tab tr td,.ris_cont_dept_tab tr th{
    border: 1px solid #ddd;
}
.ris_cont_dept_tab tr th{
    background-color: #666;
    color: #fff;
}
.ris_cont_dept_tab tr td:last-child{
    width: 10%;
}
.ris_cont_dept_tab tr td:last-child button{
    width: 35%;
    height: 26px;
    margin: 0 3%;
    color: #fff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}
.ris_cont_dept_tab tr td:last-child button.ris_cont_dept_tab_change{
    background-color: #215c84;
}



/*新增或修改的模态*/
.ris_dept_modal2{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(66,66,66,.2);
    z-index: 2;
    /*display: none;*/
}
.ris_dept_modal2>div{
    position: absolute;
    width: 360px;
    height: 500px;
    left: 50%;
    top: 50%;
    margin-left: -180px;
    margin-top: -250px;
    border: 1px solid #000;
    background: #f7f7f7;
    border-radius: 10px;
}
/*模态头部*/
.ris_dept_modal_head{
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    border-bottom: 1px solid #666;
    background: #999;
    border-radius: 10px 10px 0 0;
    font-size: 14px;
    color: #fff;
}
.ris_dept_modal_head span{
    display: inline-block;
    float: right;
    padding: 0 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}
/*模态里面的内容*/
.ris_dept_modal_tab2{
    width: 85%;
    margin: 0 auto;
    line-height: 50px;
    margin-top: 20px;
}
.ris_dept_modal_tab2 tr td:nth-child(1){width: 20%}
.ris_dept_modal_tab2 tr td:nth-child(2){width: 80%}
.ris_dept_modal_tab2 tr td input,.ris_dept_modal_tab2 tr td select{
    width: 100%;
    height: 28px;
    border: 1px solid #666;
    border-radius: 3px;
    box-sizing: border-box;
}
.ris_dept_modal_tab2 tr td textarea{
    width: 100%;
    height: 60px;
    border: 1px solid #666;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
    margin-top: 10px;
}
.ris_dept_modal_btn2{
    text-align: right;
}
.ris_dept_modal_btn2 button{
    width: 80px;
    height: 36px;
    background-color: #215c84;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    margin-right: 50px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}
.ris_dept_modal_btn2 button:hover{
    background-color: #1a4161;
}

/*点击删除弹出的模态框*/
.ris_dept_delete{
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(66,66,66,.2);
    /*display: none;*/
}
.ris_dept_delete>div{
    position: absolute;
    width: 260px;
    height: 150px;
    left: 50%;
    top: 50%;
    margin-left: -130px;
    margin-top: -75px;
    border: 1px solid #000;
    border-radius: 10px;
    background-color: #fff;
}
.ris_dept_delete_head{
    height: 30px;
    text-align: right;
    background-color: #999;
    border-radius: 10px 10px 0 0 ;
}
.ris_dept_delete_head span{
    display: inline-block;
    padding: 0 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}
/*文字*/
.ris_dept_delete_text{
    line-height: 70px;
    padding-left: 20px;
    font-size: 14px;
    color: #666;
}
/*按钮*/
.ris_dept_delete_btn{
    text-align: right;
}
.ris_dept_delete_btn button{
    width: 70px;
    background-color: #215c84;
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    height: 30px;
    margin-right: 20px;
}
.ris_dept_delete_btn button:hover{
    background-color: #1a4161;
}

</style>
